<template>
  <div class="comp-page-search">
    
    <!-- 上 - 普通搜索区
    -------------------------- -->
    <div layout layout-align="start center">
      
      <!-- 普通搜索组件
      -------------------------- -->
      <search-common
        :commonSearchList="commonSearchList"
        :isSingleSearch="isSingleSearch"
        @search="searchOne"
        @focusNameChange="v => focusName = v"></search-common>

      <!-- 打开/关闭高级搜索按钮
      -------------------------- -->
      <el-tooltip effect="dark" 
        v-if=" !isSingleSearch"
        :content="isShowAllSearch ? '收起高级搜索' : '展开高级搜索'" 
        placement="right">
        <el-button class="comp-page-search__all-search-collapse"
          @click.native="isShowAllSearch = !isShowAllSearch"
          type="primary" 
          :icon="`iconfont ${isShowAllSearch ? 'icon-sousuoshibai' : 'icon-query1'}`">
        </el-button>
      </el-tooltip>
    </div>

    <!-- 中 - 搜索内容区
    -------------------------- -->
    <search-result
      :addList="resultAddList"
      :module="module"
      :focusName="focusName"
      @searchCondChange="searchCondChange"></search-result>

    <!-- 下 - 高级搜索区
    -------------------------- -->
    <search-all class="comp-page-search__all"
      v-show="isShowAllSearch && !isSingleSearch"
      :searchAllList="searchAllList"
      @focusNameChange="v => focusName = v"
      @searchAll="searchAll"></search-all>
  </div>
</template>

<script>
import SearchCommon from './search-common'
import SearchResult from './search-result.vue'
import SearchAll from './search-all'

export default {
  name: 'CompPageSearch',
  components: { SearchCommon, SearchResult, SearchAll },
  data () {
    return {
      isShowAllSearch: false, // 是否显示高级搜索
      focusName: '', // 当前聚焦的控件的名称,用于搜索结果组件
      resultAddList: [] // 搜索结果组件添加的列表
    }
  },
  props: {
    metaList: { // 搜索组件需要的元配置数据
      type: Array,
      default () {
        return []
      }
    },
    module: String, // 当前页面的组件名
    isSingleSearch: Boolean // 是否为简约搜索（无选择和高级搜索）
  },

  computed: {
    // 普通搜索数据列表
    commonSearchList () {
      return this.metaList
        .filter(i => i.isCanCommonSearch)
        .map(i => { return { ...i } })
    },
    // 高级搜索数据列表
    searchAllList () {
      return [ ...this.metaList.map(i => { return { ...i } }) ]
    }
  },

  methods: {
    // 单个搜索
    searchOne (v) {
      if (!v.value) return this.$message.warning('请输入查询的内容')
      this.resultAddList = [ { ...v } ]
    },
    // 所有搜索
    searchAll (v) {
      this.resultAddList = [ ...v.map(i => { return { ...i } }) ]
    },
    // 搜索条件发生改变
    searchCondChange (list) {
      this.$emit('searchCondChange', list)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(page-search) {

  @include e(all-search-collapse) {
    height: $--page-search-common-height;
    padding-top: unset;
    padding-bottom: unset;
    line-height: 100%;
    margin-left: $--margin-base;
  }

  @include e(all) {
    margin-top: $--margin-base * 1.5;
    padding: $--padding-base * 2;
    border: 1px solid $--border-color-base;
    @include layout(('md', 'sm', 'xs')) { margin-bottom: $--margin-base; }
  }
}
</style>
